<template>
  <div class="rightmain_container">
    <!-- 16.3这里在外面套一层盒子，因为我们需要做个内边距 -->
    <!-- 顶部搜索部分 -->
    <div class="search_box">
      <el-row>
        <!-- 16.2 :span是用于计算比例 -->
        <!-- 左边标题 -->
        <!-- <el-col :sm="18" :xs="11" :xl="21" class="left_search"> -->
        <el-col :span="21" class="left_search">
          <el-icon :size="20" color="#444545">
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </el-col>
        <!-- 右边按钮 -->
        <!-- <el-col :sm="3" :xs="10" :xl="2" class="right_search"> -->
        <el-col :span="3" class="right_search">
          <el-button @click="cleanSearch">重置</el-button>
          <!-- 二十二、用户输入输入框内搜索事件 -->
          <!-- 22.1点击查询搜索按钮 -->
          <el-button type="primary" v-model="searchParams.keyword" @keyup.enter="fetch"
            autocomplete="false">查询搜索</el-button>
        </el-col>
      </el-row>
      <el-row class="input_search">
        <span>活动名称：</span>
        <!-- 16.4这里是搜索输入框，输入框要开 v-model 才就可以显示输入的内容 -->
        <el-input autocomplete="false" placeholder="活动名称" @keyup.enter="fetch" v-model="searchParams.keyword" />
      </el-row>
    </div>

    <!-- 十七、数据列表 添加按钮 -->
    <div class="oprations_box">
      <div class="left_search">
        <el-icon :size="20" color="#444545">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right_btn">
        <!-- 17.1给添加按钮绑定事件 -->
        <el-button @click="router.push('/sms/flashSession')">秒杀时间段列表</el-button>
        <el-button @click="ediFlash">添加活动</el-button>
      </div>
    </div>

    <!-- 活动数据列表 -->
    <div class="table_box">
      <el-table border :data="list" style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="活动标题" />
        <el-table-column prop="qnmd" label="活动状态">
          {{ qnmd }}
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间">
          <template #default="{ row }">
            {{ formateTime(row.startDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="结束时间">
          <template #default="{ row }">
            {{ formateTime(row.endDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="上线/下线">
          <template #default="{ row }">
            <el-switch @change="switchFlash(row)" v-model="row.status" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column prop="email" label="操作">
          <template #default="{ row }">
            <!-- 27.66点击分配角色按钮,路由会跳转 -->
            <!-- 27.68使用链式跳转 -->
            <el-button type="primary" link @click="
              router.push(`/sms/selectSession?flashPromotionId=${row.id}`)
              ">设置商品</el-button>
            <!-- 29.9给分配资源按钮点击事件，路由跳转，传递当前的id -->
            <el-button type="primary" link @click="ediFlash(row)">编辑</el-button>
            <el-button type="primary" link @click="Delets(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]" :total="total" />
  <!-- 弹窗 -->
  <Flashpoppus :visible="sine" @offf="offf" :Sang="senmg" />
</template>

<script setup lang="ts">
// 18.40导入 utils 里面格式化时间的方法
import { formateTime } from "@/utils/index";
import useTable from "@/hooks/useTable";
import { reactive, ref } from "vue";
import { Search, Tickets } from "@element-plus/icons-vue";
// @ts-ignore
import { ElMessage, ElMessageBox } from "element-plus";
import PaginationTwo from "@/components/Pagination/PaginationTwo.vue";
import {
  ApiFlashH,
  ApiFlashStatus,
  ApiDeletsFlash,
} from "@/http/hjh.api";
import { useRouter } from "vue-router";
import Flashpoppus from "@/views/sms/components/flashpoppus.vue";


let senmg = reactive({})

const sine = ref(false)

// 点击编辑按钮
const ediFlash = (row: any) => {
  sine.value = true,
    senmg = row

};

const offf = () => {
  sine.value = false
}


const searchParams = reactive({
  // 27.37因为 searchParams 是很多的到时候会，所以需要定义成对象
  keyword: "",
  pageSize: 5
});
// id初始化
const id = ref(0);
// 重置按钮
const cleanSearch = () => {
  // 27.43点击的时候将关键字改为空 ''
  searchParams.keyword = "";
  // 27.44然后重新发送接口请求
  // 27.45去到 useTable.ts 文件里面
  fetch(); //对外提供一个用来 手动发请求的数据
};


const { list, pageNum, pageSize, total, fetch } = useTable(ApiFlashH, searchParams);

const qnmd = "活动未开始";

// 路由实例
const router = useRouter();

// 删除按钮
//  获取路由参数 使用参数进行删除
// 删除事件
// 删除要请求的接口

const Delets = (ids: number) => {
  id.value = ids;
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ApiDeletsFlash(id.value).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          fetch();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 上下线开关
const switchFlash = (user: FlasSEerg) => {
  ApiFlashStatus({
    id: user.id,
    status: user.status,
  }).then((res) => {
    if (res.code === 200) {
      ElMessageBox.confirm("是否要修改该状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(() => {
          user.status = user.status === 1 ? 0 : 1;
        });
    }
  });
};
</script>

<style lang="less" scoped>
.rightmain_container {

  // 顶部搜索部分
  .search_box {
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
    // 二十四、将搜索框部分粘性定位到顶部
    position: sticky;
    top: -20px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);

    // 右边按钮
    .right_search {
      display: flex;
      align-items: center;
      justify-content: right;
    }

    .input_search {
      display: flex;
      align-items: center;

      span {
        font-size: 14px;
        color: #606266;
        margin-left: 30px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  // 左边标题
  .left_search {
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      color: #303133;
      margin-left: 10px;
    }
  }

  .oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
  }
}
</style>